<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="120px">
    <div>退货地址设置</div>
    <div class="mt30 w30" v-loading="loading">
      <el-form-item prop="receiver" label="收货人姓名">
        <el-input maxlength="8" v-model="form.receiver" placeholder="请输入收货人姓名"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="联系电话">
        <el-input v-model="form.phone" maxlength="11" placeholder="请输入联系电话"></el-input>
      </el-form-item>
      <el-form-item prop="postal_code" label="邮编">
        <el-input v-model="form.postal_code" maxlength="6" placeholder="请输入邮编"></el-input>
      </el-form-item>
      <el-form-item prop="area" label="所在区域">
        <el-cascader class="w100" placeholder="请选择所在区域" v-model="area" filterable clearable :options="areaList" @change="handleChange"></el-cascader>
      </el-form-item>
      <el-form-item prop="address" label="详细地址">
        <el-input type="textarea" maxlength="200" @input="$forceUpdate()" placeholder="请输入详细地址" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.address"></el-input>
      </el-form-item>

      <!-- 			<table style="width: 40%">
				<tr>
					<th class="wt150">收货人姓名</th>
					<th>
						<el-form-item prop="receiver">
							<el-input maxlength="50" v-model="form.receiver"></el-input>
						</el-form-item>
					</th>
				</tr>
				<tr>
					<th class="wt150">联系电话</th>
					<th>
						<el-form-item prop="phone">
							<el-input v-model="form.phone" maxlength="11"></el-input>
						</el-form-item>
					</th>
				</tr>
				<tr>
					<th class="wt150">邮编</th>
					<th>
						<el-form-item prop="postal_code">
							<el-input v-model="form.postal_code" maxlength="6"></el-input>
						</el-form-item>
					</th>
				</tr>
				<tr>
					<th class="wt150">所在区域</th>
					<th>
						<el-form-item prop="area">
							<el-cascader v-model="area" :options="options" @change="handleChange"></el-cascader>
						</el-form-item>
					</th>
				</tr>
				<tr>
					<th class="wt150">详细地址</th>
					<th>
						<el-form-item prop="address">
							<el-input v-model="address"></el-input>
						</el-form-item>
					</th>
				</tr>
			</table> -->
    </div>
    <el-form-item>
      <el-button class="mt30" type="primary" @click="setAddress('form')">提交</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
import serviceApi from '@/api/serviceApi.js'
export default {
  data () {
    var phoneValidate = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入收货人手机号'))
      } else {
        if (/^(13[0-9]|14[4579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[1589])\d{8}$/.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确手机号'))
        }
      }
    }
    var postalCodeValidate = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入邮编'))
      } else {
        if (/^[0-9]{6}$/.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确邮编'))
        }
      }
    }
    var areaValidate = (rule, value, callback) => {
      if (this.area.length == 0) {
        callback(new Error('请选择所在区域'))
      } else {
        callback()
      }
    }

    return {
      value: [],
      loading: false,
      form: {
        address: ''
      },
      areaList: [],
      area: [],
      rules: {
        receiver: [{
          required: true,
          message: '请输入收货人姓名',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          validator: phoneValidate,
          trigger: 'blur'
        }],
        postal_code: [{
          required: true,
          validator: postalCodeValidate,
          trigger: 'blur'
        }],
        area: [{
          required: true,
          validator: areaValidate,
          trigger: 'blur'
        }],
        address: [{
          required: true,
          message: '请输入详细地址',
          trigger: 'blur'
        }]
      }
    }
  },
  created () {
    this.getProvinces()
  },
  mounted () {
    this.$nextTick(() => {
      this.loadAddress()
    })
  },
  methods: {
    handleChange (value) {
      if (value.length) {
        this.form.address = ''
        let res = this.getTxt(this.areaList, value, 0, [])
        let code = ['province_code', 'city_code', 'area_code']
        let name = ['province_name', 'city_name', 'area_name']
        for (let i in value) {
          this.form[code[i]] = value[i]
          this.form[name[i]] = res[i]
          this.form.address += res[i]
        }
      } else {
        this.area = []
        this.form.province_code = ''
        this.form.city_code = ''
        this.form.area_code = ''
        this.form.province_name = ''
        this.form.city_name = ''
        this.form.area_name = ''
      }
    },

    getTxt (v, code, index, res) {
      for (let i = 0; i < v.length; i++) {
        let item = v[i]
        if (code[index] == item.value) {
          res.push(item.label)
          if (item.children && item.children.length) {
            this.getTxt(item.children, code, index + 1, res)
          }
          break
        }
      }
      return res
    },

    // 获取省市区
    getProvinces () {
      serviceApi.getCnareaTreelbs().then(res => {
        if (res && res.data.code == 200) {
          this.areaList = res.data.tree.children
        }
      })
    },

    loadAddress () {
      this.area = []
      this.loading = true
      serviceApi.getAddressConfig().then(res => {
        if (res.data && res.data.code == 200) {
          this.form = res.data.data || {}
          this.area.push(this.form.province_code)
          if (this.form.city_code) {
            this.area.push(this.form.city_code)
          }
          if (this.form.area_code) {
            this.area.push(this.form.area_code)
          }
        }
        this.loading = false
      }).then(res => {
        this.loading = false
      })
    },

    setAddress (e) {
      this.$refs[e].validate((valid) => {
        if (valid) {
          serviceApi.setAddressConfig(this.form).then(res => {
            if (res.data && res.data.code == 200) {
              this.$message.success('设置成功！')
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss">
/* 	.el-form-item {
		margin-bottom: 0px;
	}

	.el-cascader {
		width: 100%;
	}

	table {
		border-collapse: collapse;
		border-spacing: 0;
		border-left: 1px solid #CCCCCC;
		border-top: 1px solid #CCCCCC;
	}

	th {
		border-right: 1px solid #CCCCCC;
		border-bottom: 1px solid #CCCCCC;
		padding: 5px 15px;
	}
 */
.el-scrollbar__wrap {
  margin-right: 0px !important;
}
.mt30 {
  margin-top: 30px;
}

.w30 {
  width: 30%;
}

.w100 {
  width: 100%;
}

.wt150 {
  width: 150px;
}
</style>
